<html><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui在线调试</title>
<#assign base=request.contextPath  />
    <base id="basePath" href="${base}">

  <link rel="stylesheet" href="${base}/js/layui/css/layui.css?t=1534970980648" media="all">
    <script src="${base}/js/jquery.min.js"></script>
    <script src="${base}/js/layui/layui.js"></script>
    <script type="text/javascript" src="${base}/js/zhang.js"></script>
    <style>
  	
    .dialog{    width: 500px;
			    height: 200px;
			    border: solid 1px #b5b0b0;
			    border-radius: 5px;
			    position: absolute;
			    left: 30%;
			    bottom: 30%;
			    background: #eee;
			    line-height: 40px;
			    text-align: center;
			    display: none;
			    font-size:16px;
			}
  </style>
</head>
	<body>
		<div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1">
			 <div style="width: 216px; margin: 10px 10px 10px 10px;" id="">
			      <button class="layui-btn layui-btn-fluid btnjs" type="button" onclick="test()" id="crawle">添加客户</button>
			    </div>
			<div class="layui-table-box">
					<table class="layui-hide" id="test"></table>
				</div>
		</div>
		<div class="dialog">
	       提示
        </div>












        Welcome<br/><input id="text" type="text"/>
        <button onclick="send()">发送消息</button>
        <hr/>
        <!--userno:发送消息人的编号-->
        发送人:<div id="userno">1234</div>
        接收人：<input type="text" id="usernoto"><br>
        <button onclick="closeWebSocket()">关闭WebSocket连接</button>
        <hr/>
        <div id="message"></div>





<script>

    var websocket = null;
    var userno=document.getElementById('userno').innerHTML;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/Zhang/websocket/{userno}");
    }
    else {
        alert('当前浏览器不兼容WebSocket')
    }


    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
    }


    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }


    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }






    //将消息显示在网页上
    function setMessageInnerHTML(sendMessage) {
        document.getElementById('message').innerHTML += sendMessage + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }




    //发送消息
    function send() {
        var message = document.getElementById('text').value;//要发送的消息内容
        var now=getNowFormatDate();//获取当前时间
        document.getElementById('message').innerHTML += (now+"发送人："+userno+'<br/>'+"---"+message) + '<br/>';
        document.getElementById('message').style.color="red";
        var ToSendUserno=document.getElementById('usernoto').value; //接收人编号：4567
        message=message+"|"+ToSendUserno//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
        websocket.send(message);
    }
    //获取当前时间
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + date.getHours() + seperator2 + date.getMinutes()
                + seperator2 + date.getSeconds();
        return currentdate;
    }












    $(".btnjs").click(function(){
			$(".dialog").show(200)
			})
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'
    ,url:'${base}/user/list'//数据接口
    ,width: 900
    ,height:332
    ,cols: [[
      {field:'id',templet:function(val){
           return val.LAY_INDEX
      }, width:80, title: 'id'},
      {field:'username', width:80, title: '姓名'}
      ,{field:'password', width:80, title: '密码', sort: true}
    ]]
    ,page: true
  });
});






            function test(){
                var bas="${base}";
            alert(JSON.stringify(getDataByDicCode(bas,"home")));
                return
                var menuResourses={};
                menuResourses.roleName="你好";
                menuResourses.menuResourses=[{"menuName":"菜单名字"}];

                $.ajax({
                    type : "POST", //提交方式
                    url : "${base}/role/insertRole",//路径
                    data :{"param":JSON.stringify(menuResourses)},
                    success : function(data) {//返回数据根据结果进行相应的处理

                    }
                 })
            }


</script>
</body>
</html>